<template>
  <div class="app-container">
    <el-row :gutter="20" style="height: 100%">
      <el-col :span="24" :xs="24" class="card-box">
        <el-card v-loading="loading">
          <div class="flex-between" slot="header">
            <div>
              <span>试卷名称：{{ questionAnalysis.name }}</span>
              <span style="margin-left: 30px">总题数：{{ questionAnalysis.count }}</span>
              <span style="margin-left: 30px">总分：{{ questionAnalysis.score }}</span>
              <span style="margin-left: 30px">难度系数：{{ questionAnalysis.paperEasy }}</span>
            </div>
            <div>
              <el-button type="primary" size="small" @click="onExport" :disabled="loading">导出</el-button>
            </div>
          </div>
          <el-tabs v-model="activeName">
            <el-tab-pane label="按题型统计" name="first">
              <template v-if="activeName === 'first'">
                <ReposTable :table-data="questionTypes" :active-name="'first'" ref="table" />
                <section-box title="图表统计">
                  <PieChart
                    v-if="questionTypes && questionTypes.length"
                    :chart-id="'chart_pie_one'"
                    :pie-list="questionTypes"
                    :pie-name="'按题型统计'"
                  />
                  <NoneChart v-else />
                </section-box>
              </template>
            </el-tab-pane>

            <el-tab-pane label="按难易程度统计" name="second">
              <template v-if="activeName === 'second'">
                <ReposTable :table-data="questionDifficultList" :active-name="'second'" ref="table" />
                <section-box title="图表统计">
                  <PieChart
                    v-if="questionDifficultList && questionDifficultList.length"
                    :chart-id="'chart_pie_three'"
                    :pie-list="questionDifficultList"
                    :pie-name="'按难易程度统计'"
                  />
                  <NoneChart v-else />
                </section-box>
              </template>
            </el-tab-pane>

            <el-tab-pane label="按章节统计" name="third">
              <template v-if="activeName === 'third'">
                <ReposTable :table-data="chapters" :active-name="'third'" ref="table" />
                <section-box title="图表统计">
                  <BarChart v-if="chapters && chapters.length" :chart-id="'chart_bar_one'" :bar-list="chapters" />
                  <NoneChart v-else />
                </section-box>
              </template>
            </el-tab-pane>

            <el-tab-pane label="按知识点统计" name="fourth">
              <template v-if="activeName === 'fourth'">
                <ReposTable :table-data="knowledgeList" :active-name="'fourth'"  ref="table"/>
                <section-box title="图表统计">
                  <BarChart v-if="knowledgeList && knowledgeList.length" :chart-id="'chart_bar_two'" :bar-list="knowledgeList" />
                  <NoneChart v-else />
                </section-box>
              </template>
            </el-tab-pane>

            <el-tab-pane label="按能力层次统计" name="fifth">
              <template v-if="activeName === 'fifth'">
                <ReposTable :table-data="questionCapableList" :active-name="'fifth'" ref="table" />
                <section-box title="图表统计">
                  <BarChart
                    v-if="questionCapableList && questionCapableList.length"
                    :chart-id="'chart_bar_three'"
                    :bar-list="questionCapableList"
                  />
                  <NoneChart v-else />
                </section-box>
              </template>
            </el-tab-pane>

            <el-tab-pane label="按重要性统计" name="sixth">
              <template v-if="activeName === 'sixth'">
                <ReposTable :table-data="questionImportanceList" :active-name="'sixth'" ref="table" />
                <section-box title="图表统计">
                  <BarChart
                    v-if="questionImportanceList && questionImportanceList.length"
                    :chart-id="'chart_bar_four'"
                    :bar-list="questionImportanceList"
                  />
                  <NoneChart v-else />
                </section-box>
              </template>
            </el-tab-pane>

            <el-tab-pane label="按相关性统计" name="seventh">
              <template v-if="activeName === 'seventh'">
                <ReposTable ref="table" :table-data="questionRelevance.questionList" :active-name="'seventh'" />
              </template>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ReposTable from "./table/repos-table";
import BarChart from "../Charts/bar-chart.vue";
import PieChart from "../Charts/pie-chart.vue";
import NoneChart from "../Charts/none-chart.vue";
import SectionBox from "../juanGenerate/components/SectionBox.vue";
import { getJuanPaperStatistics, getBakeupStatistics } from "@/api/juan/juanPaper";
import exportTableAsXLSX from "@/utils/exportTableAsXLSX.js";

export default {
  name: "JuanPaperAnalysis",
  components: { ReposTable, BarChart, PieChart, SectionBox, NoneChart },
  data() {
    return {
      activeName: "first",
      loading: false,
      paperId: null,
      type: null,

      questionAnalysis: {},
      questionTypes: [],
      questionDifficultList: [],
      chapters: [],
      knowledgeList: [],
      questionCapableList: [],
      questionImportanceList: {},
      questionRelevance: {},
    };
  },
  created() {
    this.paperId = this.$route.query.paperId;
    this.type = this.$route.query.type;
    if (this.paperId) {
      if (this.type === "history") {
        this.initBakeup();
      } else {
        this.initList();
      }
    } else {
      this.$router.go(-1);
    }
  },
  methods: {
    initList() {
      getJuanPaperStatistics(this.paperId).then((res) => {
        if (res.code == 200) {
          this.questionAnalysis = res.data;
          this.questionTypes = res.data.questionTypes;
          this.questionDifficultList = res.data.questionDifficultList;
          this.chapters = res.data.chapters;
          this.knowledgeList = res.data.knowledgeList;
          this.questionCapableList = res.data.questionCapableList;
          this.questionImportanceList = res.data.questionImportanceList;
          this.questionRelevance = res.data.questionRelevance;
          console.log(this.questionRelevance, "111")
        }
      });
    },
    initBakeup() {
      getBakeupStatistics(this.paperId).then((res) => {
        if (res.code == 200) {
          this.questionAnalysis = res.data;
          this.questionTypes = res.data.questionTypes;
          this.questionDifficultList = res.data.questionDifficultList;
          this.chapters = res.data.chapters;
          this.knowledgeList = res.data.knowledgeList;
          this.questionCapableList = res.data.questionCapableList;
          this.questionImportanceList = res.data.questionImportanceList;
          this.questionRelevance = res.data.questionRelevance;
        }
      });
    },
    onExport() {
      let fileName = '';
      switch (this.activeName) {
        case 'first':
          fileName="按题型统计";
          break;
        case 'second':
          fileName="按难易程度统计";
          break;
        case 'third':
          fileName="按章节统计";
          break;
        case 'fourth':
          fileName="按知识点统计";
          break;
        case 'fifth':
          fileName="按能力层次统计";
          break;
        case 'sixth':
          fileName="按重要性统计";
          break;
        case 'seventh':
          fileName="按相关性统计";
        default:
          fileName = new Date();
          break;
      }
      exportTableAsXLSX(this.$refs.table, {
        fileName: fileName
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.card-box {
  height: 100%;
  box-sizing: border-box;
  .el-card {
    height: 100%;
  }
}
</style>
